<template>
  <section class="swiper">
    <cube-slide ref="slide" :data="swiper.swiperList" @change="changePage">
      <cube-slide-item
        class="swiper_img"
        v-for="(item, index) in swiper.swiperList"
        :key="index"
        @click.native="clickHandler(item, index)">
        <a :href="item.url">
          <img :src="item.imgUrl">
        </a>
      </cube-slide-item>
    </cube-slide>
  </section>
</template>

<script>
export default {
  name: 'Swiper',
  props: ['swiper'],
  methods: {
    changePage (current) {
      // console.log('当前轮播图序号为:' + current)
    },
    clickHandler (item, index) {
      // console.log(item, index)
    }
  }

}
</script>

<style lang="stylus" scoped>
  .swiper
    width 93%
    margin 3.5%
  .swiper >>> .cube-slide
    border-radius 7px
  .swiper_img
    width 100%
    overflow hidden
    a
      img
        width 100%
        height 140px
  .swiper >>> .cube-slide-dots
    bottom 10px
    span
      width 10px
      height 3.2px
      background hsla(0, 0%, 92.9%, .4)
      margin-left 3px
    span.active
      width 13px
      background  #ededed
</style>
